<template>
  <div>
    <div class="action">
      <div>
        <Checkbox
          v-if="showBox"
          v-model="checkAll"
          @on-change="handleAll"
          style="margin-right: 20px"
          >全选</Checkbox
        >
        <Button v-if="showBox" type="error" ghost size="small" @click="delData"
          >删除
          <span v-if="delLength">({{ delLength }})</span>
        </Button>
      </div>
      <Button
        type="error"
        :ghost="showBox ? true : false"
        @click="batchManage"
        >{{ showBox ? "取消管理" : "批量管理" }}</Button
      >
    </div>

    <div class="card" v-if="list.length">
      <div v-for="(item, index) in list" :key="index" class="item-warp">
        <div
          class="cover-photo"
          :style="`background-image:url(${item.siteCover})`"
        >
          <Checkbox
            class="checkbox"
            v-model="item.checked"
            v-if="showBox"
            @on-change="handleItem"
          />
        </div>
        <div class="right">
          <p class="place text2hidden">{{ item.siteName }}</p>
          <p class="address text2hidden">
            <Icon type="md-pin" />{{ item.region }}{{ item.siteAddress }}
          </p>
          <div class="detail-btn" @click="goPage(item)">详情</div>
        </div>
      </div>
    </div>
    <empty v-else />
    <div class="page" v-if="list.length">
      <Page
        :total="total"
        @on-change="currentHandle"
        :page-size="params.pageSize"
        show-total
      />
    </div>
  </div>
</template>

<script>
import * as myCollection from "@/api/myCollection.js";
export default {
  name: "field",
  data() {
    return {
      showBox: false, //是否展示多选框
      checkAll: false, //全选
      params: {
        pageNumber: 1,
        pageSize: 9,
        type: "1002003",
      },
      list: [],
      total: 0,
      delLength: 0, //删除数据得个数
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //获取列表数据
    getList() {
      myCollection.selectCollect(this.params).then(({ code, result }) => {
        if (code === 200) {
          this.total = Number(result.total);
          if (result.records) {
            result.records.map((ele) => {
              ele.checked = false;
            });
            this.list = result.records;
          }
        }
      });
    },
    //切换分页
    currentHandle(current) {
      this.params.pageNumber = current;
      this.getList();
    },
    //批量管理
    batchManage() {
      this.showBox = !this.showBox;
      this.list.forEach((item) => {
        item.checked = false;
      });
      this.delLength = 0;
      this.checkAll = false;
    },
    //全选
    handleAll() {
      if (this.checkAll) {
        this.list.forEach((item) => {
          item.checked = true;
        });

        this.delLength = this.list.length;
      } else {
        this.list.forEach((item) => {
          item.checked = false;
        });
        this.delLength = 0;
      }
    },
    //列表单个勾选
    handleItem() {
      this.delLength = this.list.filter((item) => item.checked).length;
    },
    //删除数据
    delData() {
      const selList = this.list.filter((item) => item.checked);
      if (!selList.length) {
        return this.$Message.error("请勾选需要删除的数据");
      }
      this.$Modal.confirm({
        title: "提示",
        content: "是否确认删除所勾选数据？",
        onOk: () => {
          let params = {
            dataIds: selList.map((item) => item.siteId),
            typeId: "1002003",
          };
          myCollection.cancelCollect(params).then(({ code, result }) => {
            if (code === 200 && result) {
              this.$Message.success("删除成功");
              this.$emit("userInfo");
              this.getList();
              this.showBox = false;
              this.delLength = 0;
            }
          });
        },
        onCancel: () => {},
      });
    },
    //跳转详情
    goPage(item) {
      console.log(item);
      this.$router.push({
        path: "/siteDetail",
        query: {
          detailContent: item,
        },
      });
      this.$store.commit("SET_PERLEFTMENUSHOW", false);
      sessionStorage.setItem("name", "siteDetail");
    },
  },
};
</script>

<style lang="scss" scoped>
.action {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
}
.card {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  justify-items: start;
  justify-content: center;

  .item-warp {
    width: calc(493 / 1920 * 100vw);
    display: flex;
    .cover-photo {
      background-size: cover;
      width: calc(240 / 1920 * 100vw);
      height: calc(170 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      position: relative;
      .checkbox {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }
    .right {
      width: calc(233 / 1920 * 100vw);
      margin-left: calc(20 / 1920 * 100vw);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .place {
        font-size: calc(16 / 1920 * 100vw);
        color: #333333;
      }
      .address {
        color: #666;
        font-size: calc(14 / 1920 * 100vw);
      }
      .detail-btn {
        width: calc(96 / 1920 * 100vw);
        height: calc(40 / 1920 * 100vw);
        background: #fd5151;
        font-size: calc(16 / 1920 * 100vw);
        color: #fff;
        border-radius: calc(5 / 1920 * 100vw);
        text-align: center;
        line-height: calc(40 / 1920 * 100vw);
        cursor: pointer;
      }
    }
  }
}
.page {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
.text2hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}
.ivu-checkbox-wrapper {
  margin-right: 0;
}
</style>